/**
 * Created by Administrator on 2016/10/20.
 */
window.onload=function(){
lunbo()
}
function lunbo(){
    var banner_move=document.querySelector(".lunbo ul")
    var bannerWidth=document.querySelector(".lunbo").offsetWidth
    var banner=document.querySelector(".lunbo")
    var lis= document.querySelectorAll(".lunbo li");
    var index=0;
    var timeId=setInterval(function(){
        banner_move.style.transition="all 1s";
        index++;
        banner_move.style.transform="translateX("+index*-bannerWidth+"px)"
    },1000)
    banner_move.addEventListener("transitionend",function(e){
        if(index>1){
            index=0;
            banner_move.style.transition=""
            banner_move.style.transform="translateX("+index*-bannerWidth+"px)"
        }
    })
    var startX = 0;
    var moveX =0;
    var distanceX = 0;
    banner.addEventListener('touchstart',function(e){
        startX = e.touches[0].clientX;
        clearInterval(timeId);
    })

    banner.addEventListener('touchmove',function(e){
        moveX = e.touches[0].clientX - startX;
        banner_move.style.transform = "translateX("+(moveX+distanceX)+ "px)";
    })

    banner.addEventListener('touchend',function(e){
        if(Math.abs(moveX)>(banner_move/4)){
            console.log('吸附');
            // 判断 吸附的方向
            if (moveX>0) {
                index--;
            }else{
                index++;
            }
        }
        banner_move.style.transition = 'all .5s';
        // 修改 transform
        banner_move.style.transform='translateX('+index*-bannerWidth+'px)'
        timeId = setInterval(function() {
            // 累加 索引值
            index++;

            banner_move.style.transition = 'all 0.5s';

            banner_move.style.transform = 'translateX(' + index * -bannerWidth + 'px)';
        }, 1000);
    })
}